<template>
    <div class="login_main">
        <div class="login_box">
            <div style="display: flex;flex-direction: row;align-items: center">
                <img src="../assets/logo_color.svg" alt="" style="width: 60px">
                <span class="web_name">飞鱼客栈</span>
            </div>
            <el-input v-model="loginInfo.account" type="text" clearable placeholder="用户名">
                <template #prefix><i class="iconfont icon-user icon" /></template>
            </el-input>
            <el-input v-model="loginInfo.password" type="password" show-password placeholder="登录密码">
                <template #prefix><i class="iconfont icon-password icon" /></template>
            </el-input>
            <div class="flex align-center row space-between" style="width: 100%">
                <el-input v-model="loginInfo.authCode" style="width: 190px;" type="text" placeholder="验证码"></el-input>
                <img :src="captchaInfo.image"  @click="getCaptcha" alt="" class="captcha_box">
            </div>
            <el-button @click="login" style="width: 100%;border-radius: 15px;height: 45px;font-size: 16pt">登录</el-button>
            <div class="other_box">
                <router-link to="/signup">注册账号</router-link>
                <router-link to="/findpassword">忘记密码</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {captcha, token} from "../api/auth";
import {ElMessage} from "element-plus";
import {getItem, setItem} from "../utils/webutil";

export default {
    name: "SignIn",
    data(){
        return{
            loginInfo:{
                grantType:'captcha',
                account:'',
                password:'',
                authCode:'',
            },
            captchaInfo: {
                image:null,
                key:null,
            },
        }
    },
    methods:{
        getCaptcha(){
          captcha()
          .then(res=>{
              this.captchaInfo=res.data;
          })
        },
        login(){
            var head={
                'Captcha-Key':this.captchaInfo.key,
                'Captcha-Code':this.loginInfo.authCode
            }
            token(this.loginInfo,head)
            .then(res=>{
                if(res.code===200){
                    this.$store.dispatch('setUser',res.data);
                    setItem("auth",res.data)
                    this.$router.push('/');
                    console.log(res.data)
                    ElMessage.success("登录成功");
                }else {
                    ElMessage.error(res.msg);
                }
            })
            .catch(err=>{
                ElMessage.error(err.msg);
            })
        }
    },
    mounted() {
        this.getCaptcha()
    }
}
</script>

<style scoped>
.captcha_box{
    width: 190px;
    height: 43px;
    border-radius: 15px;
    border: 1px solid #c9c9c9;
}
.other_box{
    width: 100%;
    //height: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.icon{
    font-size: 17pt;
}
:deep(.el-input__inner) {
    height: 45px;
    font-size: 12pt;
    border-radius: 15px !important;
}
.login_box{
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
}
.login_main{
    height: calc(100vh - 180px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);

    //background-image: linear-gradient(to right top, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);

}
.web_name {
    min-width: 60px;
//width: 120px;
    text-decoration: none;
    color: #304455;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: "STXingkai", "STXinwei", "STKaiti", "STLiti", "Xingkai SC", "KaiTi", "Microsoft Yahei", "SimSun", serif;
    font-size: 30px;
}
</style>
